import {defineComponent} from 'vue';
import {Breadcrumb, Divider, Layout, Menu} from 'ant-design-vue';
import {RouterView, useRoute, useRouter} from 'vue-router';

const {Sider, Content, Header, Footer} = Layout;

export default defineComponent({
    setup() {
        const router = useRouter();
        const route = useRoute();
        const routes = router.getRoutes();

        const breadcrumbs = route.matched.map(match => ({
            text: match.meta.displayName || match.name,
            href: match.path,
        }));

        const renderSider = () => (
            <Sider collapsible theme="light">
                <div className="logo"/>
                <Menu theme="light" mode="inline">
                    {routes.map((route) => (
                        <Menu.Item key={route.path} onClick={() => router.push(route.path)}>
                            {route.meta?.icon && <route.meta.icon/>}
                            <span>{route.meta?.displayName || route.name}</span>
                        </Menu.Item>
                    ))}
                </Menu>
            </Sider>
        );

        const renderHeader = () => (
            <Header class="site-layout-sub-header-background">
                {/* You can add additional content or styling here if needed */}
            </Header>
        );

        const renderBreadcrumb = () => (
            <Breadcrumb>
                {breadcrumbs.map(breadcrumb => (
                    <Breadcrumb.Item key={breadcrumb.href}>
                        <router-link to={breadcrumb.href}>{breadcrumb.text}</router-link>
                    </Breadcrumb.Item>
                ))}
            </Breadcrumb>
        );

        const renderContent = () => (
            <Content>
                <div className="frosted-glass">
                    {renderBreadcrumb()}
                    <Divider/>
                    <RouterView/>
                </div>
            </Content>
        );

        const renderFooter = () => (
            <Footer class="footer" style={{textAlign: 'center'}}>
                © 2024 Created by zjarlin
            </Footer>
        );

        return () => (
            <Layout style={{minHeight: '100vh'}}>
                {renderSider()}
                <Layout>
                    {renderHeader()}
                    {renderContent()}
                    {renderFooter()}
                </Layout>
            </Layout>
        );
    },
});